<template>
	<div class="user">
		<el-divider content-position="left">个人信息</el-divider>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card class="avatarImg">
					<el-avatar :size="120" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
					</el-avatar>
					<el-upload ref="upload" :file-list="fileList" action="">
						<el-button slot="trigger" size="small" type="primary">头像上传</el-button>
						<div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card>
					<div>
						<el-form label-width="80px" size="mini" :rules="rules" :model="formLabelAlign"
							ref="ValidateForm">
							<el-form-item label="登录帐号" prop="UserNo">
								<el-input v-model="formLabelAlign.UserNo" disabled></el-input>
							</el-form-item>
							<el-form-item label="用户名" prop="UserName">
								<el-input v-model="formLabelAlign.UserName"></el-input>
							</el-form-item>
							<el-form-item label="手机号" prop="Tel">
								<el-input v-model="formLabelAlign.Tel"></el-input>
							</el-form-item>
							<el-form-item label="E-mail" prop="Email">
								<el-input v-model="formLabelAlign.Email"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('ValidateForm')">保存修改</el-button>
								<el-button @click="power()">设置委托</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card>
					<div slot="header" class="clearfix">
						<span>电子签字</span>
					</div>
					<div class="item">
						<el-image :src="src">
							<div slot="placeholder" class="image-slot">
								加载中<span class="dot">...</span>
							</div>
						</el-image>
					</div>
					<el-button type="primary" size="mini" @click="dialogTableVisible = true">设置/修改</el-button>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div slot="header" class="clearfix">
						<span>主部门</span>
					</div>
					<div class="item">
						<el-tag type="success">{{ formLabelAlign.DeptName }}</el-tag>
					</div>
					<el-button type="primary" size="mini"  @click="dialogTab = true">切换登录部门</el-button>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div slot="header" class="clearfix">
						<span>修改密码</span>
					</div>
					<div class="item">
						<el-tag type="success">*********</el-tag>
					</div>
					<el-button type="primary" size="mini">修改密码</el-button>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div slot="header" class="clearfix">
						<span>岗位/部门-权限</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog title="电子签名设置" width='40%' :visible.sync="dialogTableVisible">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-card>
						<h5>利用扫描仪设置步骤:</h5>
						<ul>
							<li>在白纸上写下您的签名</li>
							<li>送入扫描仪扫描，并得到jpg文件。</li>
							<li>利用图片处理工具把他们处理缩小到 90*30像素大小。</li>
						</ul>
						<h5>手写设置:</h5>
						<ul>
							<li>启动画板程序，写下您的签名。</li>
							<li>保存成.jpg文件，设置文件为90*30像素大小。</li>
						</ul>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-image class="imgupdbox" :src="url" :fit="fit"></el-image>
					<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
						:on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
						:auto-upload="false">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
						</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-col>
			</el-row>
		</el-dialog>
		<el-dialog title="切换部门" width='30%' :visible.sync="dialogTab">
			
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "user",
		data() {
			return {
				fileList: [],
				formLabelAlign: {},
				src: "",
				upUrl: "",
				dialogTableVisible: false,
				dialogTab:false,
				fit: 'contain',
				url: '',
				dynamicHandler: '',
				rules: {
					userName: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}, ],
					phone: [{
							required: true,
							message: "请输入手机号",
							trigger: "change"
						},
						{
							validator: function(rule, value, callback) {
								if (/^1[34578]\d{9}$/.test(value) == false) {
									callback(new Error("请输入正确的手机号"));
								} else {
									callback();
								}
							},
							trigger: "change",
						},
					],
					email: [{
							required: true,
							message: "请输入邮箱地址",
							trigger: "blur"
						},
						{
							type: "email",
							message: "请输入正确的邮箱地址",
							trigger: ["blur", "change"],
						},
					],
				},
			};
		},
		created() {
			this.loadData();
			this.HeadPic();
			this.getSigimg();

		},
		methods: {
			loadData() {
				let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_Setting");
				handler.AddUrlData();
				let data = handler.DoMethodReturnString("Default_Init");
				if (data.indexOf("err@") != -1) {
					this.$message.error(data);
					console.log(data);
					return;
				}
				this.formLabelAlign = JSON.parse(data);
				console.log(this.formLabelAlign);
			},
			submitForm() {
				this.$refs["ValidateForm"].validate((valid) => {
					if (valid) {
						let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_Setting");
						handler.AddPara("Name", this.formLabelAlign.UserName);
						handler.AddPara("Tel", this.formLabelAlign.Tel);
						handler.AddPara("Email", this.formLabelAlign.Email);
						const data = handler.DoMethodReturnString("UpdateEmpNo");
						console.log(data);
						this.$message("保存成功！");
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			power() {
				this.$router.push({
					name: 'powerlist'
				})
			},
			HeadPic() {
				var doMethod = "HeadPic_Save";
				const httpHandlerName = "BP.WF.HttpHandler.WF_Setting";
				this.url = process.env.VUE_APP_HANDLER + "?DoType=HttpHandler&DoMethod=" + doMethod + "&HttpHandlerName=" +
					httpHandlerName;
				console.log(this.url)
			},
			//获取签名图片url 方法
			getSigimg() {
				const _this = this;
				const doMethod = "Siganture_Init";
				const httpHandlerName = "BP.WF.HttpHandler.WF_Setting";
				const apiurl = process.env.VUE_APP_HANDLER + "?DoType=HttpHandler&DoMethod=" + doMethod + "&HttpHandlerName=" +
					httpHandlerName;
				this.$.ajax({
					url: apiurl,
					dataType: "json",
					success: function(data) {
						let url = '../../DataUser/Siganture/' + data.No + '.jpg';
						_this.url = url;
						console.log(_this.url)
					}
				});
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			}
		},
	};
</script>

<style lang="less" scoped>
	.user {
		.avatarImg {
			text-align: center;
			line-height: 40px;
			min-height: 292px;
		}

		.item {
			margin-bottom: 18px;
		}

		.imgupdbox {
			width: 120px;
			height: 30px;
		}
	}
</style>
